<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>

<body>
    <div id="app">
        {{toggle}}
        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
        <hr>
        <div id="v-model-radiobutton">
            <input type="radio" id="one" :value="genders.male" v-model="gender" />
            <label for="one">男</label>
            <br />
            <input type="radio" id="two" :value="genders.female" v-model="gender" />
            <label for="two">女</label>
            <br />
            <input type="radio" id="three" :value="genders.abnormal" v-model="gender" />
            <label for="three">死变态</label>
            <br />
            <span>Picked: {{ gender }}</span>
        </div>
        <hr>
        <div id="v-model-select" class="demo">
            <select v-model="selected">
                <option disabled value="">Please select one</option>
                <option :value="{ letter: 'A' }">A</option>
                <option :value="{ letter: 'B' }">B</option>
                <option :value="{ letter: 'C' }">C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
    </div>

    <script>
        const app = {
            data() {
                return {
                    toggle: "yes",
                    pick: "a",
                    genders: {
                        male: "male",
                        female: "female",
                        abnormal: "abnormal",
                    },
                    gender: "male",
                    selected:""
                }
            }
        }
        Vue.createApp(app).mount("#app")
    </script>
</body>

</html>